大家好

今天要來做個有雙色或多色的漸層背景
想要有漸層但又不想使用圖檔時，可以就用 linear-gradient 來做線性漸層
這最大的好處應該是很快就看到效果
又不會因為顏色錯誤、白邊...等因素又要開繪圖程式重新製作存檔了吧

這時使用

background-image: linear-gradient(angle, color 1, color 2, ...);

就可以做出有 方向漸層、角度漸層以及線條和格子 的效果了，下面試作了範例。

方向漸層：

在 linear-gradient(angle, color 1, color 2, ...); 中
angle 可以用關鍵字 top/right/bottom/left 決定漸層方向，
在前面一定要加上 to 才能看到效果，
如果沒設定方向則會是使用預設的向下漸層，
color 1, color 2, ... 可以使用 2 種顏色以上，
效果就會依方向使用 color 1 → color 2 → ...

範例

background-image: linear-gradient(to top, #008b8b, #ffff00);
background-image: linear-gradient(to right, #008b8b, #ffff00);
background-image: linear-gradient(to bottom, #008b8b, #ffff00);
background-image: linear-gradient(to left, #008b8b, #ffff00);

除了 上右下左 外

也可以使用 上右、上左、下右、下左
範例

background-image: linear-gradient(to top right, #008b8b, #ffff00);
background-image: linear-gradient(to top left, #008b8b, #ffff00);
background-image: linear-gradient(to bottom right, #008b8b, #ffff00);
background-image: linear-gradient(to bottom left, #008b8b, #ffff00);

但都是 0、45、90、135、 ...的固定角度
要其他的角度就要用 角度漸層

角度漸層：

angle 用角度 度 = deg 為單位就可以作出像37度的效果了
範例：

background: linear-gradient(90deg, #008b8b, #ffff00);
/* 90deg 也等於 to right 的效果 */
background: linear-gradient(-45deg, #008b8b, #ffff00);
/* -45deg 也等於 top left 的效果 */
background: linear-gradient(37deg, #008b8b, #ffff00);
/* 特別的角度也可以 */

多色漸層：

漸層的顏色還可以使用多色漸層，像範例的彩虹七彩顏色
使用 2 種顏色以上只需要用 ", " 分隔每個顏色，
範例：

background-image: linear-gradient(to right bottom, #ff0000, #ffa500, #ffff00, #008000, #0000ff, #4b0082, #9400d3);

利用 linear-gradient 漸層作出來的背景快速又漂亮，
就可避免圖片背景可能會出現在漸層中的模糊和馬賽克了。

--- 明日待續。